<template>
  <div id="a">
    <div class="b">
      <div class="bb">
        <img class="c" src="" alt="" />
        <span class="d">{{ $route.meta.title }}</span>
        <div class="dd"></div>
      </div>
    </div>
    <van-tabs
      v-model="active"
      background="#FF8A80"
      color="#fff"
      title-inactive-color="#fff"
      title-active-color="red"
    >
      <van-tab title="商品">
        <div class="main-shop">
          <img :src="goodsInfo.img" alt="" class="img-logo" />
          <p class="price">
            <span class="one">￥</span>{{ goodsInfo.price
            }}<span class="oldprice">￥{{ goodsInfo.market_price }}</span
            ><i class="two">收藏</i>
          </p>
          <p class="title">{{ goodsInfo.goodsname }}</p>
          <p class="xinxi">
            商品规格属性：
            {{ goodsInfo.specsname }}
          </p>
          <p class="ele">11.11限时299元</p>
          <p class="a">此商品于2020-11-11,00点结束闪购特卖，品牌美妆闪购专场</p>
          <div class="yh">
            <p class="p">
              领券<span class="aa">￥300</span><span class="aa">￥50</span
              ><span class="aa">￥10</span>
            </p>
            <p>分期<span class="fq">可选3/6/12期</span></p>
          </div>
          <van-goods-action>
            <van-goods-action-icon
              icon="chat-o"
              text="客服"
            />
            <van-goods-action-icon
              icon="cart-o"
              text="购物车"
              @click="goshopping"
            />
            <van-goods-action-icon
              icon="shop-o"
              text="店铺"
            />
            <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="addtoCart"
        />
            <van-goods-action-button
              type="danger"
              text="立即购买"
              @click="onClickButton"
            />
          </van-goods-action>
        </div>
      </van-tab>

      <van-tab title="评价">内容 2</van-tab>
      <van-tab title="详情">内容 3</van-tab>
      <van-tab title="推荐">内容 4</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getGoodsInfo, cartAdd } from "../util/request/api";
import { Toast} from "vant";
export default {
  data() {
    return {
      active: 0,
      goodsInfo: "",
      value: 1,
      attrArr: [],
    };
  },
  mounted() {
    getGoodsInfo({ id: this.$route.query.id }).then((res) => {
      if (res.data.code == 200) {
        this.goodsInfo = res.data.list[0];
        this.attrArr = res.data.list[0].specsattr.split(",");
      }
    });
  },
  methods: {
    goshopping() {
      this.$router.push("/shopping");
    },
     addtoCart() {
      if (sessionStorage.getItem("isLogin")) {
        cartAdd({
          uid: JSON.parse(sessionStorage.getItem("isLogin")).uid,
          goodsid: this.goodsInfo.id,
          num: this.value,
        }).then((res) => {
          if (res.data.code == 200) {
            Toast.success(res.msg);
          } else {
            Toast.fail(res.msg);
          }
        });
      }
      },
    onClickButton() {
      this.$router.push("/order");
    },
  },
};
</script>

<style  scoped>
.van-tabs {
  color: aliceblue;
  height: 7rem;
}
.main-shop {
  width: 3.75rem;
  height: 7rem;
}
.img-logo {
  width: 3.75rem;
  height: 3.75rem;
}
.price {
  height: 0.25rem;
  color: #ff6040;
  font-size: 0.25rem;
  margin-left: 0.1rem;
  margin-top: 0.1rem;
}
.one {
  font-size: 0.12rem;
}
.oldprice {
  font-size: 0.12rem;
  color: #979797;
  text-decoration: line-through;
  margin-left: 0.05rem;
  margin-right: 2.2rem;
}
.two {
  font-size: 0.12rem;
  color: #ff6040;
}
.title {
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #333333;
  margin-left: 0.1rem;
  margin-top: 0.05rem;
  margin-bottom: 0.05rem;
}
.xinxi {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #999999;
  margin-left: 0.1rem;
}
.ele {
  background: #ff8066;
  width: 0.83rem;
  margin-left: 0.1rem;
  margin-top: 0.15rem;
}
.a {
  width: 3.55rem;
  height: 0.2rem;
  background-color: #f2f2f2;
  margin-left: 0.1rem;
  margin-top: 0.05rem;
  font-family: PingFangSC-Light;
  font-size: 10px;
  color: #999999;

  line-height: 0.2rem;
}
.yh {
  height: 362px;
  font-size: 0.14rem;
  color: #333333;
  margin-left: 0.1rem;
  margin-top: 0.15rem;
  font-family: PingFangSC-Semibold;
}
.aa {
  margin-left: 0.2rem;
  color: #663014;
  font-size: 0.12rem;
}
.p {
  margin-bottom: 0.2rem;
}
.fq {
  font-family: PingFangSC-Light;
  font-size: 12px;
  color: #666666;
  line-height: 12px;
  margin-left: 0.2rem;
}
</style>
